<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import { ref, computed } from 'vue'
	import { delayApi } from '@/apis/task.js'
	// 1.  定义data变量
	const planDepartureTime = ref('')
	//  表单数据（根据后台接口）
	const formData = ref({
		"delayReason": '', // 延迟原因
		"delayTime": '', //  延迟时间
		"id": '' //  任务 id
	})
	onLoad((query) => {
		console.log('延迟提货参数：', query)
		planDepartureTime.value = query.planDepartureTime
		formData.value.id = query.id
	})

	// 2.  表单数据存储
	//  延迟时间选择
	const selectTime = (e) => {
		//  获取提货的年月日=>  通过数组解构其中的值
		const [dateTime] = planDepartureTime.value.split(' ')
		console.log('选中的时间：', e.detail.value);
		//  存储选择的延迟时间
		formData.value.delayTime = `${dateTime} ${e.detail.value}`
	}
	//  统计延迟原因输入文字的长度
	const delayReasonCount = computed(() => formData.value.delayReason.length)

	// 3.  表单校验
	/**
	 * 校验思路：
		● 使用计算属性计算选择的当天提货时间和原定时间是否超过两小时：end - start > 0 && end - start <= 7200 * 1000
		● 使用计算属性计算字数是否在 50 字范围内： wordsCount.value <= 50 && wordsCount.value > 0
		● 校验不通过，使用error类名标红提醒
	 */
	// 超出 2 小时isDelayTimeOk为 false（ 校验不通过） ｜ true  校验通过
	const isDelayTimeOk = computed(() => {
		//  原定提货时间时间戳: start
		const start = +new Date(planDepartureTime.value)
		const end = +new Date(formData.value.delayTime)
		//  延时时间范围（当天）：end - start > 0 && end - start <= 7200 * 1000
		return end - start > 0 && end - start <= 7200 * 1000
	})
	const isReasonCountOk = computed(() => {
		//  延迟原因文字长度范围：0 ～ 50
		return delayReasonCount.value <= 50 && delayReasonCount.value > 0
	})

	//  兜底校验：通过按钮的禁用状态控制=》 isSubmitDisable：true 禁用 ｜ false 不禁用
	const isSubmitDisable = computed(() => {
		//  延时时间或者原因输入任意一个校验不通过，按钮就禁用
		return !isDelayTimeOk.value || !isReasonCountOk.value
	})

	// 4. 表单提交
	const submit = async () => {
		await delayApi(formData.value)
		uni.showToast({
			title: '提交成功',
			mask: true
		})
		//  关闭之前所有页面，跳转新页面
		setTimeout(() => {
			uni.reLaunch({
				url: '/pages/task/index'
			})
		}, 3000)
	}
</script>

<template>
	<view class="page-container">
		<uni-list :border="false">
			<uni-list-item title="原定时间 " showArrow :rightText="planDepartureTime" />
			<uni-list-item title="延迟时间" showArrow>
				<!-- 
				  说明：v-slot:插槽名 === #插槽名
					
					#footer插槽用于自定义插槽右侧的内容
				 -->
				<!-- <template v-slot:footer> -->
				<template #footer>
					<!-- picker 组件 mode 设置诶 time 可以选择时间 -->
					<picker @change="selectTime" class="time-picker" mode="time">
						<!--  显示选中的时间 -->
						<text :class="{error: !isDelayTimeOk}" v-if="formData.delayTime">{{formData.delayTime+':00'}}</text>
						<text v-else>不可超过2个小时</text>
					</picker>
				</template>
			</uni-list-item>
			<uni-list-item direction="column">
				<!-- 自定义uni-list-item的内容 -->
				<template v-slot:body>
					<view class="textarea-wrapper">
						<textarea v-model="formData.delayReason" class="textarea" placeholder-style="color: #818181"
							placeholder="请输入延迟提货原因"></textarea>
						<text class="words-count" :class="{error: !isReasonCountOk}">{{delayReasonCount}}/50</text>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item :border="false">
				<template v-slot:body>
					<!-- 提交按钮 -->
					<button :disabled="isSubmitDisable" class="button" @click="submit">提交</button>
				</template>
			</uni-list-item>
		</uni-list>
	</view>
</template>

<style lang="scss" scoped>
	@import './index.scss';
</style>